<template>
    <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
    >
        <el-form-item label="购买人姓名" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入购买人姓名" />
        </el-form-item>
        <el-form-item label="购买单位" prop="danwei">
            <el-input v-model="ruleForm.danwei" placeholder="请输入购买单位" />
        </el-form-item>
        <el-form-item label="联系方式" prop="number">
            <el-input v-model="ruleForm.number" placeholder="请输入联系方式"/>
        </el-form-item>
        <el-form-item label="购买产品" prop="region">
            <div class="m-4">
                <el-cascader
                    v-model="value"
                    :options="optionselect"
                    :props="props"
                    @change="handleChange"
                />
            </div>
        </el-form-item>
        <el-form-item label="购买数量" prop="count">
            <el-select-v2
                    v-model="ruleForm.count"
                    placeholder="count"
                    :options="options"
            />
        </el-form-item>
        <el-form-item label="交付日期" required>
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker
                            v-model="ruleForm.date1"
                            type="date"
                            aria-label="最早交付时间"
                            placeholder="最晚交付时间"
                            style="width: 100%"
                    />
                </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
                <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker
                            v-model="ruleForm.date2"
                            aria-label="Pick a time"
                            placeholder="最晚交付时间"
                            style="width: 100%"
                    />
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="货运方式" prop="location">
            <el-segmented v-model="ruleForm.location" :options="locationOptions" />
        </el-form-item>
        <el-form-item label="优选服务" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox value="Online activities" name="type">
                    保修期1年
                </el-checkbox>
                <el-checkbox value="Promotion activities" name="type">
                    保修期2年+半年无理由换货
                </el-checkbox>
                <el-checkbox value="Offline activities" name="type">
                    7天无理由退货
                </el-checkbox>
                <el-checkbox value="Simple brand exposure" name="type">
                    器械清洁服务
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="选择支付方式" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
                <el-radio value="Sponsorship">支付宝</el-radio>
                <el-radio value="Venue">微信</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="详细地址" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                创建订单
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            <el-button @click="test()">test</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

import request from "../utils/request"
import axios from "axios";

interface RuleForm {
    name: string
    region: string
    danwei:string
    count: number
    number:string
    date1: string
    date2: string
    location: string
    type: string[]
    resource: string
    desc: string
}
const value = ref([])

const props = {
    expandTrigger: 'hover' as const,
}

const handleChange = (value) => {
    console.log(value)
}

const optionselect = [
    {
        value: 'yxl',
        label: '影像类',
        children: [
            {
                value: '彩色超声多普勒治疗仪',
                label: '彩色超声多普勒治疗仪',
            },
            {
                value: 'C臂型X光机',
                label: 'C臂型X光机',
            },
            {
                value: 'CT控制盒',
                label: 'CT控制盒',
            },
            {
                value: 'CT机',
                label: 'CT机',
            },
        ],
    },
    {
        value: 'kfl',
        label: '康复类',
        children: [
            {
                value: '下肢辅助行走设备',
                label: '下肢辅助行走设备',
            },
            {
                value: '牵引器',
                label: '牵引器',
            },
            {
                value: '代步轮椅',
                label: '代步轮椅',
            },
            {
                value: '外骨骼机器人',
                label: '外骨骼机器人',
            },
        ],
    },
    {
        value: 'sys',
        label: '实验室类',
        children: [
            {
                value: '纯水仪',
                label: '纯水仪',
            },
            {
                value: '稀释仪',
                label: '稀释仪',
            },
            {
                value: '血浆机',
                label: '血浆机',
            },
            {
                value: 'X荧光分析仪',
                label: 'X荧光分析仪',
            },
        ],
    },
    {
        value: 'jtl',
        label: '家庭类',
        children: [
            {
                value: '脑波设备',
                label: '脑波设备',
            },
            {
                value: '老人陪护机器人',
                label: '老人陪护机器人',
            },
            {
                value: '颈椎治疗仪',
                label: '颈椎治疗仪',
            },
            {
                value: '护眼仪',
                label: '护眼仪',
            },
        ],
    },
    {
        value: '检测类',
        label: '检测类',
        children: [
            {
                value: '血糖检测仪',
                label: '血糖检测仪',
            },
            {
                value: '心电监测仪',
                label: '心电监测仪',
            },
            {
                value: '点滴警报仪',
                label: '点滴警报仪',
            },
            {
                value: 'BMI测试仪',
                label: 'BMI测试仪',
            },
        ],
    },
    {
        value: 'zll',
        label: '治疗类',
        children: [
            {
                value: '制氧机',
                label: '制氧机',
            },
            {
                value: '雾化器',
                label: '雾化器',
            },
        ],
    },
]

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    danwei:'',
    region: '',
    number:'',
    count: 0,
    date1: '',
    date2: '',
    location: '',
    type: [],
    resource: '',
    desc: '',
})


const orderForm = reactive({
    buyer: '',
    deviceName: '',
    count:0,
    totalPrice:""

})

const locationOptions = ['陆运', '海运', '空运']

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入中文！', trigger: 'blur' },
        { min: 2, max: 5, message: '长度应在2到4个字', trigger: 'blur' },
    ],
    danwei: [
        {
            required: true,
            message: '请输入单位名称',
            trigger: 'change',
        },
    ],
    count: [
        {
            required: true,
            message: '选择你要购买的数量',
            trigger: 'change',
        },{ min: 1, max: 20, message: '最多能定20台', trigger: 'blur' },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    location: [
        {
            required: true,
            message: 'Please select a location',
            trigger: 'change',
        },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: '请至少勾选一项优选服务',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: '不要让地址栏为空', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {


    // console.log(ruleForm)

    // console.log(value.value.values())


    orderForm.buyer = ruleForm.name
    orderForm.count =ruleForm.count
    orderForm.deviceName = value.value[1]
    // console.log(orderForm.deviceName)
    const min = 90000;
    const max = 1000000;
    orderForm.totalPrice = String(Math.floor(Math.random() * (max - min + 1)) + min);

    axios.post("http://localhost:9091/order/add",orderForm).then(res=>{
        console.log(res)
    })




    console.log(orderForm)





    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const test = ()=>{
    console.log(1)
    request.get("http://localhost:9091/devices/test").then(res=>{
        console.log(res.data)
    })
    // this.axios.get("http://localhost:9091/devices/test").then((response) => {
    //     console.log(response)
    // })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>
